(function($){

var defaultOptions = {
    valueRange: [48, 200],
    defaultValue: 100,
    step: 2,
    onchange: function(){}
};

$.fn.tempo = function(options){
    var _t = this;
    options = $.extend({}, defaultOptions, options);
    //当前值
    var value;
    var $tempo = this.find('.tempo');
    var $up    = this.find('.change-tempo .up');
    var $down  = this.find('.change-tempo .down');
    $up.on('click', function(){
    	var newVal = value + options.step;
        _t.setValue(newVal);
    });
    $down.on('click', function(){
    	var newVal = value - options.step;
        _t.setValue(newVal);
    });
    
    this.setValue = function(val){
        var vr = options.valueRange;
        if(val > vr[1]) val = vr[1];
        if(val < vr[0]) val = vr[0];
        if(val === value) return;
        value = val;
        var background = '';
        var chars = (value < 100 ? 'n' : '') + value;
            for(var i = 0 ; i < chars.length; i++){
                if(background) background += ',';
                background += 'url(./images/num-' + chars[i] + '.png)'
            }
        $tempo.css('background-image', background);
        val === vr[1] ? $up.addClass('disabled') : $up.removeClass('disabled');
        val === vr[0] ? $down.addClass('disabled') : $down.removeClass('disabled');
        options.onchange(val);
    };
    this.setValue(options.defaultValue);
    
    return this;
};

})(jQuery);